<template>
    <el-card>
        <el-form :model="form" ref="form" :inline="true" :disabled="isDiabled">
            <el-form-item label="一级分类">
                <el-select v-model="category1Id" placeholder="请选择">
                    <el-option :label="cate1.name" :value="cate1.id" v-for="cate1 in category1List"
                        :key="cate1.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="二级分类">
                <el-select v-model="category2Id" placeholder="请选择">
                    <el-option :label="cate2.name" :value="cate2.id" v-for="cate2 in category2List"
                        :key="cate2.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="三级分类">
                <el-select v-model="category3Id" placeholder="请选择">
                    <el-option :label="cate3.name" :value="cate3.id" v-for="cate3 in category3List"
                        :key="cate3.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>

import store from '@/store'
import { mapActions, mapState } from 'vuex'
import { set } from 'js-cookie'
export default {
    name: 'CategorySelector',
    props: ['isDiabled'],
    data() {
        return {
            form: {
                region: '',
            }
        }
    },
    mounted() {
        // this.getCategory1ListData()
        this.getCategory1ListData()
    },
    methods: {
        async getCategory1Data() {
            const result = await reqGetCategory1Data()
            console.log(result)
        },

        ...mapActions('attr', ['getCategory1ListData', 'getCategory2ListData', 'getCategory3ListData', 'setCategory3Id'])
    },
    computed: {
        //计算vuex中的数据
        ...mapState('attr', ['category1List', 'category2List', 'category3List']),

        category1Id: {
            get() {
                return this.$store.state.attr.category1Id
            },
            set(value) {
                this.getCategory2ListData(value)
            }
        },
        category2Id: {
            get() {
                return this.$store.state.attr.category2Id
            },
            set(value) {
                this.getCategory3ListData(value)
            }
        },
        category3Id: {
            get() {
                return this.$store.state.attr.category3Id
            },
            set(value) {
                this.setCategory3Id(value)
            }
        }
    }
}
</script>

<style lang="scss" scoped></style>